<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title>Image Annotation Example</title>
       <link rel="stylesheet" type="text/css" href="style.css"/>
       <script type="text/javascript" src="../src/ImageAnnotator.js"></script>
       <script type="text/javascript" src="../src/invoke.js"></script>
    </head>
    <body vocab="http://schema.org/">
        <article>
            <h1>Using RDFa to Annotate Images</h1><section>
                <h1>The Idea</h1>
               <p>Using <a href="http://www.w3.org/TR/rdfa-lite/">RDFa Lite 1.1</a>, image annotations are 
                  encoded in a document as regular HTML.  Subsequently, client JavaScript code can find the
                    annotations and apply them to the image just by using the RDFa API.   The result
                    is that the image on the left has annotations applied to it to look like the
                    image on the right (on mouse over). The advantage is the added semantics from the annotations are
                    described somewhere in the same document and available to search engines and other Web user agents.</p>
                <p><img class="image" src="California-Slender-Salamander.jpg" /><img class="image"
                        src="California-Slender-Salamander-after.jpg" /></p>
            </section>
            <section>
                <h1>A Working Example</h1>
                <p>The image:</p>
                <img src="California-Slender-Salamander.jpg" typeof="ImageObject" />
                <p>The annotation:</p>
                <div resource="California-Slender-Salamander.jpg">
                   <div property="annotation" typeof="Comment">
                      <h2 property="description">California Slender Salamander</h2>
                      <p property="text">The California Slender Salamander is a lungless salamander.</p>
                      <p>Link:
                         <a property="url"
                            href="http://en.wikipedia.org/wiki/California_slender_salamander">Wikipedia Entry</a>
                      </p>
                      <p property="region" typeof="Rectangle">
                         Position: <span property="positionX">84</span>,
                         <span property="positionY">114</span>
                         Size: <span property="width">90</span> by
                         <span property="height">75</span>
                      </p>
                      <p><b>Note:</b> <em>Normally this wouldn't need to be displayed to the user.</em></p>
                   </div>                   
                   
                </div>
                <p>How to try the example:</p>
                <ul>
                   <li>If you mouse over the salamander, you'll see a box highlight.</li>
                   <li>Leave the mouse over the salamander and a tool tip will show.</li>
                   <li>Clicking on the box will open the Wikipedia page for the Salamander.</li>
                </ul>
                <p>None of these semantics, box, or tool tip are coded in the original page or image.
                    They are just described in the annotation markup above via RDFa. The page is
                    made self-aware by using a library to access the page's own RDFa
                    annotations--some of which could be content hidden from view.</p>
                <p>Internally, the JavaScript for the page invokes a library to access the RDFa and
                    add the annotations to the image just by including some scripts:</p>
                <pre>
   &lt;script type="text/javascript" src="../src/ImageAnnotator.js">&lt;/script>
   &lt;script type="text/javascript" src="../src/invoke.js">&lt;/script>
                </pre>
                <p>The styling of the box and tool tip is taken from the annotation's CSS.  Take a look at the annotation above and you'll see that the styles match.</p>
            </section>
            <section>
                <h1>How it Works</h1>
                <ol>
                   <li>First, somewhere at the beginning of the document (e.g. the <code>body</code> element), add a <code>vocab</code> attribute with the value <q><code>http://schema.org/</code></q>:

<pre>
   &lt;body vocab="http://schema.org/">
   ...
   &lt;/body>
</pre>                   </li>
                    <li>
                        <p>For each image that is annotated, add a <code>typeof</code> attribute with the value <code>ImageObject</code> :</p>
                        <pre>
   &lt;img src="California-Slender-Salamander.jpg" typeof="ImageObject"/>
                </pre>
                    </li>
                    <li>
                        <p>Next, somewhere in the document, add an annotation. The above example
                            looks like:</p>
                        <pre>
   &lt;div resource="California-Slender-Salamander.jpg">
      &lt;div property="annotation" typeof="Comment">
         &lt;h2 property="description">California Slender Salamander&lt;/h2>
         &lt;p property="text">The California Slender Salamander is a lungless salamander.&lt;/p>
         &lt;p>Link:
            &lt;a property="url"
               href="http://en.wikipedia.org/wiki/California_slender_salamander">Wikipedia Entry&lt;/a>
         &lt;/p>
         &lt;p property="region" typeof="Rectangle">
            Position: &lt;span property="positionX">84&lt;/span>,
            &lt;span property="positionY">114&lt;/span>
            Size: &lt;span property="width">90&lt;/span> by
            &lt;span property="height">75&lt;/span>
         &lt;/p>
         &lt;p>&lt;b>Note:&lt;/b> &lt;em>Normally this wouldn't need to be displayed to the user.&lt;/em>&lt;/p>
      &lt;/div>                   
   &lt;/div>
                </pre>
                        <p>The annotation identifies the image by using the <code>resource</code>
                            attribute with a value of the URI of the image.  Contained within that
                            parent element can be any number of annotations as long as the are
                            associated with the <code>annotation</code> property
                            relation.</p><p>Note that the annotation can be hidden from view by CSS
                            or just be placed in some part of the document's visible content.</p>
                    </li>
                    <li>
                       <p>Include the <code>ImageAnnotator.js</code> and <code>invoke.js</code> JavaScript files, in that order, to enable the RDFa API and the annotations.</p>
                    </li>
                </ol>
                <p>The <code>ImageAnnotator</code> JavaScript attaches itself to the RDFa-in-action framework and is invoked automatically.  It looks for annotated images by the type 
                   <code>http://schema.org/ImageObject</code>.</p>
               <p>The styling of the annotation on the image is taken from the styling of the annotation.  As such, use CSS or style attributes on the annotation to change the box color, text styles, etc.</p>
            </section>
        </article>
    </body>
</html>
